@tailwind utilities;

/* 
  sm @media (min-width: 0px) and (max-width: 639px) { ... }
  md @media (min-width: 640px) and (max-width: 767px) { ... }
  lg @media (min-width: 768px) and (max-width: 1023px) { ... }
  xl @media (min-width: 1024px) and (max-width: 1279px) { ... }
  2xl @media (min-width: 1280px) and (max-width: 1535px) { ... }
  3xl @media (min-width: 1536px) { ... }
*/

// @layer utilities {}

/* 响应式宽度 */
.w-react {
  @apply sm:w-[92%] md:w-[90%] lg:w-[720px] xl:w-[91%] 2xl:w-[1200px] 3xl:w-[75%] 4xl:w-[70%];
}

/* 内容区域 */
.h-content {
  height: calc(100vh - 80px);
}

/* 内容栅格 */
.grid-content {
  height: calc((100vh - 80px) / 2);
}

.bg-content {
  background: var(--content-bg);
}

.light .text-content {
  background: rgba(#fff, 0.8);
}

.global-background {
  background-image: var(--content-image);
}
